{% extends "student/base.html" %}

{% block title %}课程信息 - 期末成绩登记统计分析系统{% endblock %}

{% block styles %}
<style>
  .courses-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .courses-header {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 30px;
  }

  .courses-title {
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .courses-title i {
    color: var(--primary-blue);
  }

  .courses-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  .summary-card {
    background: var(--light-blue);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
  }

  .summary-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-blue);
    margin: 10px 0;
  }

  .summary-label {
    color: var(--text-secondary);
    font-size: 14px;
  }

  .courses-table {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .courses-table table {
    width: 100%;
    border-collapse: collapse;
  }

  .courses-table th,
  .courses-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .courses-table th {
    background: var(--light-blue);
    color: var(--text-primary);
    font-weight: 600;
  }

  .courses-table tr:hover {
    background: #f8f9fa;
  }

  .course-value {
    font-weight: 500;
  }

  .no-courses {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
  }

  .no-courses i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 20px;
  }

  .semester-selector {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .semester-selector select {
    padding: 10px 20px;
    border: 2px solid rgba(138, 215, 255, 0.5);
    border-radius: 10px;
    font-size: 14px;
    color: #2c3e50;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23399CDE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
  }

  .semester-selector select:hover {
    border-color: #399CDE;
  }

  .semester-selector select:focus {
    outline: none;
    border-color: #399CDE;
  }

  .semester-selector label {
    font-size: 15px;
    color: #2c3e50;
    font-weight: 500;
  }
</style>
{% endblock %}

{% block content %}
<div class="courses-container">
  <div class="courses-header">
    <div class="courses-title">
      <i class="fas fa-book"></i>
      <span>课程信息</span>
    </div>
    <div class="courses-summary">
      <div class="summary-card">
        <div class="summary-value">{{ total_courses }}</div>
        <div class="summary-label">总课程数</div>
      </div>
      <div class="summary-card">
        <div class="summary-value">{{ total_credits }}</div>
        <div class="summary-label">总学分</div>
      </div>
    </div>
  </div>

  <div class="semester-selector">
    <label for="semester">选择学期：</label>
    <select id="semester" onchange="updateCourses()">
      <option value="">全部学期</option>
      {% for semester in semester_labels %}
      <option value="{{ semester }}">{{ semester }}</option>
      {% endfor %}
    </select>
  </div>

  <div class="courses-table">
    {% if courses %}
    <table>
      <thead>
        <tr>
          <th>课程编号</th>
          <th>课程名称</th>
          <th>学分</th>
          <th>教师</th>
          <th>学期</th>
        </tr>
      </thead>
      <tbody>
        {% for course in courses %}
        <tr>
          <td>{{ course.course_id }}</td>
          <td>{{ course.course_name }}</td>
          <td>{{ course.credits }}</td>
          <td>{{ course.teacher_name|default('未分配') }}</td>
          <td>{{ course.semester }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="no-courses">
      <i class="fas fa-book"></i>
      <p>暂无课程信息</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  function updateCourses() {
    const semester = document.getElementById('semester').value;

    // 获取选中学期的数据
    fetch(`/student/api/courses?semester=${semester}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        if (!data || data.length === 0) {
          throw new Error('No data available');
        }
        // 更新课程表格
        updateCoursesTable(data);
      })
      .catch(error => {
        console.error('Error:', error);
        alert('获取数据失败，请稍后重试');
      });
  }

  function updateCoursesTable(data) {
    const tbody = document.querySelector('.courses-table table tbody');
    if (!tbody) return;

    tbody.innerHTML = data.map(course => `
      <tr>
        <td>${course.course_id}</td>
        <td>${course.course_name}</td>
        <td>${course.credits.toFixed(1)}</td>
        <td>${course.teacher_name || '未分配'}</td>
        <td>${course.semester}</td>
      </tr>
    `).join('');
  }
</script>
{% endblock %}